<script setup>
import { ref, getCurrentInstance, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import api from "@/api";

import sgIcon from "@/assets/images/pm/menu-sg.png";
import clIcon from "@/assets/images/pm/menu-cl.png";
import hjIcon from "@/assets/images/pm/menu-hj.png";
import ryglIcon from "@/assets/images/pm/menu-rygl.png";
import wdIcon from "@/assets/images/pm/menu-wd.png";
import rqIcon from "@/assets/images/pm/menu-rq.png";
import pxIcon from "@/assets/images/pm/menu-px.png";
import aqIcon from "@/assets/images/pm/menu-aq.png";
import jdIcon from "@/assets/images/pm/menu-jd.png";
import bgIcon from "@/assets/images/pm/menu-bg.png";
import areaIcon from "@/assets/images/project/area.png";
import carbonIcon from "@/assets/images/pm/carbon.png";

const { proxy } = getCurrentInstance();

const route = useRouter();

const menuList = ref([
  {
    name: "首页",
    icon: bgIcon,
    path: "/pm/projectHome",
  },
  {
    name: "环境",
    icon: hjIcon,
    path: "/pm/environment",
  },
  {
    name: "车辆",
    icon: clIcon,
    path: "/pm/vehicle",
  },
  {
    name: "人员",
    icon: ryglIcon,
    path: "/pm/staff",
  },
  {
    name: "培训",
    icon: pxIcon,
    path: "/pm/train",
  },
  // {
  //   name: "巡检",
  //   icon: xjjlIcon,
  //   path: "/pm/environment",
  // },
  {
    name: "文档",
    icon: wdIcon,
    path: "/pm/document",
  },
  {
    name: "安全",
    icon: aqIcon,
    path: "/pm/safety",
  },
  {
    name: "进度",
    icon: jdIcon,
    path: "/pm/progress",
  },
  {
    name: "日清",
    icon: rqIcon,
    path: "/pm/lean",
  },
  {
    name: "报告",
    icon: bgIcon,
    path: "/pm/report",
  },
  {
    name: "人数",
    icon: areaIcon,
    path: "/pm/workSurface",
  },
  {
    name: "低碳",
    icon: carbonIcon,
    path: "/pm/lowCarbon",
  },
]);

const menuActive = ref(-1);
api.homepage.getHomePageDevicesImpl().then((res) => {
  if (res.deviceInfos) {
    proxy._GLOBAL.DEVICEINFO = res.deviceInfos;
    sessionStorage.setItem("device", res.deviceInfos);
  }

  //针对提供第三方外部链接进行处理
  //如果是提供给第三方的外部链接则不考虑默认展示的情况
  if (proxy._GLOBAL.LINKTYPE !== "weburl") {
    //默认展示
    const activeRoute = sessionStorage.getItem("pmActiveRoute");
    if (activeRoute == null || activeRoute === "0") {
      menuActive.value = 0;
      sessionStorage.setItem("pmActiveRoute", 0);
      route.push("/pm/projectHome");
    } else {
      menuActive.value = activeRoute;
    }
  }
});

const menuHandleClick = function (item, index) {
  if (menuActive.value == index) return;
  sessionStorage.setItem("pmActiveRoute", index);
  route.push(item.path);
  menuActive.value = index;
};

onMounted(() => {});
onUnmounted(() => {
  window.sessionStorage.removeItem("pmActiveRoute");
});
</script>

<template>
  <div class="app-container">
    <div class="menu">
      <div
        class="menu-item"
        v-for="(item, index) in menuList"
        :key="index"
        :class="menuActive == index ? 'active' : ''"
        @click="menuHandleClick(item, index)"
      >
        <img :src="item.icon" />
        <span>{{ item.name }}</span>
      </div>
    </div>
    <div class="right-sider">
      <router-view></router-view>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: calc(100vh - 65px);
  font-family: SourceHanSansSC;
  display: flex;

  .menu {
    width: 55px;
    height: 100%;
    background: #394880;
    color: #ffffff;
    padding-top: 10px;
    box-sizing: border-box;
    position: relative;
    z-index: 9;

    .menu-item {
      width: 100%;
      padding: 5px 0px;
      box-sizing: border-box;
      text-align: center;
      cursor: pointer;
      margin-bottom: 10px;

      img {
        display: block;
        margin: auto;
        width: 25px;
        height: 25px;
      }

      span {
        font-size: 12px;
      }

      &.active {
        background: #6e91fb;
        border-radius: 5px;
      }
    }
  }

  .right-sider {
    width: calc(100% - 55px);
    padding: 10px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
  }
}
</style>
